$(function(){


	//滚动条 overflow
	$(".container .left .list").mCustomScrollbar({theme:"light-thin",});

	var $audio = $("audio");
	var player = new Player($audio);

	var $progressBar = $(".pro_bar")
	var $progressLine = $(".pro_line")
	var $progressDot = $(".pro_dot")
	var lyric;
	var progress = Progress($progressBar, $progressLine, $progressDot)
		progress.progressClick(function(value){
				player.musicSeekTo(value)
		});
		progress.progressMove(function(value){
			player.musicSeekTo(value)

		});


	var $voiceBar = $(".voi_bar")
	var $voiceLine = $(".voi_line")
	var $voiceDot = $(".voi_dot")


	var vioceProgress = Progress($voiceBar, $voiceLine, $voiceDot)
		vioceProgress.progressClick(function(value){
				player.musicVoiceSeekTo(value)
		});

		vioceProgress.progressMove(function(value){
			player.musicVoiceSeekTo(value)

		});


	//后台获取歌曲资源
	getPlayerList()
	function getPlayerList(){
		$.ajax({
				url: "/static/musicInfo.json",
				type: "GET",
				dataType: "json",
				async :true,
				success: function(data){
					player.musicList = data;
					var $ul = $(".container_in .left .list ul")
					$.each(data, function(index, values){
						//调用函数动态创建歌曲列表信息
						$ul.append(createMusicItem(index, values))
					});
					//调用函数默认创建第一首歌曲信息
					initMusicInfo(data[0]);//静态的信息
					initMusicLyric(data[0]);//滚动的歌词
				},
				error: function(e){
					console.log(e)
				}
		});
	}
	


	//初始化歌曲列表
	function createMusicItem(index, music){
		var $item = $(
			"<li class='music'>"+
			"<div class='check'><i></i></div>"+
			"<div class='number'><center><font>"+(index+1)+
			"</font><img src = '../static/images/login/wave.gif' id='wave'/></center></div>"+ 
			"<div class='song'>"+music.name+"</div>"+
			"<div class='btn_list'>"+
				"<span class='glyphicon glyphicon-play' aria-hidden='true' id='paly-icon'></span>"+
			"</div>"+
			"<div class='singer'>"+music.singer+"</div>"+
			"<div class='length'>"+music.time+"</div>"+
			"</li>"
			);
		$item.get(0).index = index;
		$item.get(0).music = music;
		return $item;
	}



	//初始化歌曲信息
	function initMusicInfo(music){
		//【右边】更新到对应的图片/歌曲名/歌手名/专辑名
		var $musicImage = $(".img img");
		var $musicName  = $("#songname")
		var $musicSinger  = $("#singername")
		var $musicAblum  = $("#ablum")

		//【底部】更新到对应的歌曲名/歌曲时间
		var $musicProcessName  = $(".txt .song")
		var $musicProcessTime  = $(".txt .time")

		//切换背景图片
		var $bgmask = $(".bg_mask")

		//获取元素赋值
		$musicImage.prop("src", music.cover);
		$musicName.text(music.name)
		$musicSinger.text(music.singer) 
		$musicAblum.text(music.ablum);

		$musicProcessName.text(music.name+" / "+music.singer)
		$musicProcessTime.text("00:00/ "+music.time);
		$bgmask.css("background", "url('"+music.cover+"')");



	}
	//	初始化歌词
	function initMusicLyric(music){
		// 实例化歌词对象
		 lyric = new Lyric(music.lrc_link);
		var $LyricContainer = $(".lyric");
		//首先清空歌词容器
		$LyricContainer.html("");
		lyric.loadLyric(function(){
			//创建歌词列表
			$.each(lyric.lyrics,function(index, ele){
				var $item = $("<li>"+ele+"</li>");
				//添加
				$LyricContainer.append($item)
			})
		})
	}


//
function wave_font_opacity($item){

					//隐藏自身的序号用gif图替换
					$item.find("font").css("display", "none")
					//显示gif图片
					$item.find("img").css({"display": "block","opacity":1});
					//兄弟元素的序号依然显示
					$item.siblings().find("font").css("display", "block")
					//兄弟元素的gif依然隐藏
					$item.siblings().find("img").css("display" ,"none")
					//更改该行歌曲的不透明度为1
					$item.find(".song").css("opacity",1)
					//其他行的歌曲的不透明度依然为0.5
					$item.siblings().find(".song").css("opacity",0.5)

					//更改该行歌手的不透明度为1
					$item.find(".singer").css("opacity",1)
					//其他行的歌手的不透明度依然为0.5
					$item.siblings().find(".singer").css("opacity",0.5)
		}
	

play_button_list()

function play_button_list(){

	// 歌曲列表按钮单击事件
		$(".list").delegate("span", "click", function(){
				
				var $icon = $(this)

				var $item = $(this).closest("li")
				var $btn =$("#play-icon").children("span")

				if($icon.prop("class") == "glyphicon glyphicon-play"){
					
					//切换自己的状态
					$icon.prop("class", "glyphicon glyphicon-pause")
					//同步底部按钮的状态
					$btn.prop("class", "glyphicon glyphicon-pause")
					//切换兄弟元素的状态
					$icon.closest("li").siblings().children("div").
						find("span").prop("class", "glyphicon glyphicon-play")
				

					wave_font_opacity($item)

					//播放对应的歌曲及初始化歌曲信息
					initMusicInfo($item.get(0).music)
					initMusicLyric($item.get(0).music)
					active()

				}else{
					//待播放状态，显示序号，隐藏gif图
					$item.find("font").css("display", "block")
					$item.find("img").css("display", "none")
					//
					$item.find(".song").css("opacity",0.5)
					$item.find(".singer").css("opacity",0.5)

					//切换自己的状态
					$icon.prop("class", "glyphicon glyphicon-play")
					//同步底部按钮的状态
					$btn.prop("class", "glyphicon glyphicon-play")
					//切换兄弟元素的状态
					$icon.closest("li").siblings().children("div").
					find("span").prop("class", "glyphicon glyphicon-play")
				
				}

				player.playMusic($item.get(0).index,$item.get(0).music);
		})
}
		
	// 事件监听
// initEvents();
// function initEvents(){

		//监听声音按钮
	$("#voice-icon").click(function(){
				//图标切换
				var $icon = $(this).prop("class");
				if($icon == "glyphicon glyphicon-volume-off"){
					$(this).prop("class", "glyphicon glyphicon-volume-up");
					player.musicVoiceSeekTo(1)

				}else{
					player.musicVoiceSeekTo(0)
					$(this).prop("class", "glyphicon glyphicon-volume-off");
				}
			
			})

	//底部播放按钮
	var $musicPlay = $("#play-icon");
	$musicPlay.on("click", function(){
			//判断有没有播放过音乐
			if(player.currentIndex == -1){
				//没有播放过音乐，则应该默认播放第一首歌曲
				//找到第一首音乐
				$(".list .music").eq(0).find(".btn_list")
					.children("span").trigger("click")
			}else{
				//有播放过音乐
				$(".list .music").eq(player.currentIndex).find(".btn_list")
					.children("span").trigger("click")
			
			}
		})
	//播放下一歌曲
	next_music_play()
	function next_music_play(){

		$("#next-icon").on("click", function(){

			var $item = $(".list ul li.music").eq(player.nextMusic())
			var $btn =$("#play-icon").children("span")
				$btn.prop("class", "glyphicon glyphicon-pause")
				$item.find("span").attr("class","glyphicon glyphicon-pause" )
				$item.siblings().children("div").
						find("span").prop("class", "glyphicon glyphicon-play")

				wave_font_opacity($item)

				initMusicInfo($item.get(0).music)
				initMusicLyric($item.get(0).music)
				player.playMusic($item.get(0).index,$item.get(0).music);
				active()
		})
	}
			

		//播放上一歌曲
		pre_music_play()
function pre_music_play(){
		$("#pre-icon").on("click", function(){
				var $item = $(".list ul li.music").eq(player.preMusic())
				var $btn =$("#play-icon").children("span")
					$btn.prop("class", "glyphicon glyphicon-pause")

				$item.find("span").attr("class","glyphicon glyphicon-pause" )
				$item.siblings().children("div").
						find("span").prop("class", "glyphicon glyphicon-play")
				wave_font_opacity($item)
				initMusicInfo($item.get(0).music)
				initMusicLyric($item.get(0).music)
				player.playMusic($item.get(0).index,$item.get(0).music);	
				active()

		})
}





		// 歌曲列表按钮

		$(".list").delegate(".music", "mouseover", function(){
					
					$(this).children(".btn_list").css({"visibility":"visible"});

			})
		$(".list").delegate(".music", "mouseleave", function(){

					$(this).children(".btn_list").css({"visibility":"hidden"});

			})

		//监听播放进度
	function active(){

			player.musicTimeUpdate(function(duration, currentTime,timeStr){
				
			$("font.time").text(timeStr);
				//同步进度条
				//计算播放比例
				var value = currentTime / duration * 100;
			
				progress.setProgress(value)
				if(value == 100){
					//当前播放完成，播放下一首歌曲
					var $item = $(".list ul li.music").eq(player.nextMusic())
					var $btn =$("#play-icon").children("span")
					$btn.prop("class", "glyphicon glyphicon-pause")
					$item.find("span").attr("class","glyphicon glyphicon-pause" )
					$item.siblings().children("div").
						find("span").prop("class", "glyphicon glyphicon-play")

				wave_font_opacity($item)

				initMusicInfo($item.get(0).music)
				initMusicLyric($item.get(0).music)
				player.playMusic($item.get(0).index,$item.get(0).music);
				active()

				}

				//实现歌词同步
				var index = lyric.currentIndex(currentTime);
				var $it = $(".lyric li").eq(index);
				$it.addClass("cur");
				$it.siblings().removeClass("cur")
				if(index<3)return false;
				$(".lyric").css({
					marginTop: (-index+2) * 29
				});
			});
		}

		//复选框

		$(".list").delegate(".check", "click", function(){
			var $i = $(this).find("i")
			var is_has = $($i).has("font").length
			if(is_has){
				if($i.closest("li").attr("class")==="title"){
					$("i").find("font").remove();
					$("i").removeClass("checked");
				}else{
					$i.find("font").remove();
					$i.removeClass("checked");
				}
				console.log("removed");
			}else{
				if($i.closest("li").attr("class")==="title"){
					$("i").append("<font class='hook'>&radic;</font>")
					$("i").addClass("checked")
				}else{
					$i.append("<font class='hook'>&radic;</font>")
					$i.addClass("checked")
				}
			}

		})

})